<template>
  <div class="box">
      <div class="header2">
        <van-nav-bar title="喵喵~" left-text="返回" left-arrow @click-left="onBack">
        <template #right v-if="redact" >
        <button @click="redact=false">编辑</button>
        </template>
        <template #right v-else>
        <button @click="cleanCart">删除</button>
        <button @click="redact=!redact">取消</button>
        </template>
        </van-nav-bar>
      </div>
      <div class="main">
        <!-- 购物车没有东西时的页面 -->
        <div class="nothing" v-if="empty">
          <van-empty
            class="custom-image"
            image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
            description="你的购物车空空如也，快去选购吧~"
          />
        </div>
        <!-- 购物车有商品时的页面 -->
        <div class="hasthing" v-else>
          <van-swipe-cell v-for="item in list" :key="item.cartid">
            <van-checkbox v-model="item.flag" checked-color="#ee0a24" @change="onSele(item.cartid,item.flag)"></van-checkbox>
            <van-card
              :num="item.num"
              :price="item.originprice"
              :title="item.proname"
              :thumb="item.img1"
            >
              <template #num>
                <van-stepper v-model="item.num" theme="round" button-size="22" disable-input @change="upDates(item.cartid,item.num)"/>
              </template>
            </van-card>
            <template #right>
              <van-button square text="删除" type="danger" class="delete-button"  @click="removeOne(item.cartid)"/>
            </template>
          </van-swipe-cell>
        </div>
        <!-- 分割线 -->
        <div>
          <van-divider>可能你还想要</van-divider>
        </div>
        <!-- 其他商品 -->
        <div>
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
          <ul class="prolist1">
          <li class="van-hairline--bottom van-hairline--right" v-for="item in prolist" :key="item.proid">
            <img :src="item.img1" alt="">
            <div> 
              <h4 class="van-multi-ellipsis--l2">{{item.proname}}</h4>
              <p>￥{{item.originprice}}</p>
            </div>
          </li>
        </ul>
        </van-list>
        </div>
         <!-- 底部提交订单栏 -->
        <div class="shopcar">
          <van-submit-bar :price="isAllMoney" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="isAllCheck"></van-checkbox>
          </van-submit-bar>
        </div>
      </div>

  </div>
</template>

<script>
import Vue from 'vue';
import { Empty,Card,Stepper,SwipeCell,Checkbox,CheckboxGroup,SubmitBar,NavBar,Divider  } from 'vant';

Vue.use(Empty);
Vue.use(Card);
Vue.use(Stepper);
Vue.use(SwipeCell);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(SubmitBar);
Vue.use(NavBar);
Vue.use(Divider);

import {getProList} from "../api/home";
import { LookCart,upNums,removeCart,deleteOne,selectNew,selectAll } from "../api/cart";
export default {
  name: 'CartView',
  data () {
    return {
      empty:true,
      list:[],
      redact:true,
      prolist: [],
      loading: false,
      finished: false,
      count: 1,
    }
  },
  components: {},
  created () {
    // 判断用户是否登录，未登录先进行登录再点击购物车
    if(localStorage.getItem('token')) {
      this.fnCart()
    } else {
      this.$router.push('/login');
    } 
  },
  methods: {
    fnCart() {
      LookCart({userid:localStorage.getItem('userid')}).then(res=>{
        // console.log(res.data.data);
        // console.log(localStorage.getItem('token'));
        if (res.data.code=='10020') {
          this.empty = true;
        } else {
          this.empty = false;
          this.list = res.data.data;
        }
      })
    },
    // 改变商品的数量
    upDates(cartid,num) {
      console.log(cartid,num);
      upNums({cartid,num}).then(res=>{
        console.log(res);
      })
    },
    // 提交订单
    onSubmit() {

    },
    // 点击删除（）
    cleanCart() {
      removeCart({user:localStorage.getItem('user')}).then(res=>{
        console.log(res);
        // this.$router.push('/home')
        this.fnCart();
      })
    },
    // 点击返回
    onBack() {
      this.$router.push('/home')
    },
    // 点击删除单条数据
    removeOne(cartid) {
      deleteOne({cartid}).then(res=>{
        console.log(res);
        this.fnCart();
      })
    },
    // 更新当前商品选中的状态
    onSele(cartid,flag) {
      selectNew({cartid,flag}).then(res=>{
        console.log(res);
      })
    },
     onLoad(){
      this.loading = true;
      setTimeout(()=>{
        // 海购商品列表
        getProList({count:this.count,limitNum:12}).then(data => {
        // console.log(data.data.data);
        // this.prolist = data.data.data;
        this.loading = false;
        if (data.data.data.length==0) {
          this.finished = true;
        } else {
          this.prolist = [...this.prolist,...data.data.data];
          this.count++;
        }
        });
      },1500)
    },
  },
  computed: {
    // 全选
    isAllCheck: {
      set(val) {
        this.list.forEach(item=>item.flag = val);
        selectAll({userid:localStorage.getItem('userid'),type:val}).then(res=>{
          console.log(res);
        })
      },
      get() {
        return this.list.every(item=>item.flag == true)
      }
    },
    // 总金额
    isAllMoney: {
      get() {
        return this.list.filter(item=>item.flag).reduce((sum,item1)=>{
          return sum+item1.num*item1.originprice*100
        },0)
      }
    }
  }
}

</script>

<style scoped>
 .custom-image .van-empty__image {
    width: 90px;
    height: 90px;
  }
  .goods-card {
    margin: 0;
    background-color: white;
  }

.delete-button {
    height: 100%;
  }
::v-deep .van-swipe-cell__wrapper {
  display: flex;
  background-color: white;
}
::v-deep .van-checkbox {
  width: .3rem;
}
::v-deep .van-card {
  flex: 1;
  background-color: white;
}
.van-submit-bar {
  margin-bottom: 50px;
}
.prolist2 li {
  display: flex;
}
.prolist2 li img {
  width: 30%;
  height: 40%;
}
</style>